import DialogBox from "@/components/DialogBox";
import { SchemaInfo } from "@/components/JsonSchemaForm/interface";
import { SchemaNodeType, SchemaNodeKey } from "@/utils/constants";
import { ElForm, ElFormItem, ElInput } from "element-plus";
import { PropType } from "vue";

export default defineComponent({
	props: {
		title: String,
		paramSchema: {
			type: Object, // as PropType<SchemaInfo>,
			default() {
				return {};
			}
		},
		paramData: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const submit = () => {
			emit("submit");
		};
		return () => {
			return (
				<DialogBox title={props.title} {...attrs} onConfirm={() => submit()}>
					<ElForm label-width="100px">
						{Object.keys(props.paramSchema!).map(fieldKey => {
							return fieldKey == SchemaNodeKey.sensor || fieldKey == SchemaNodeKey.sn ? null : ( //排除变量配置
								<ParamForm item={props.paramSchema[fieldKey]} param={props.paramData} paramKey={fieldKey} />
							);
						})}
					</ElForm>
				</DialogBox>
			);
		};
	}
});

const ParamForm = defineComponent({
	props: {
		item: {
			type: Object as PropType<SchemaInfo>,
			default() {
				return {};
			}
		},
		paramKey: String,
		param: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	setup(props, {}) {
		return () => {
			return (
				<>
					{props.item.properties && Object.keys(props.item.properties).length ? (
						<div class="pb-2">
							<div class="pb-2">{props.item.title}</div>
							<div class="pt-6 pl-6 pr-6 mb-6 relative" style="border:1px solid #ccc">
								{/* 设置二级参数 */}

								{
									((props.param[props.paramKey!] = {}),
									Object.keys(props.item.properties).map(pk => {
										return <ParamForm item={props.item.properties![pk]} paramKey={pk} param={props.param[props.paramKey!]} />;
									}))
								}
							</div>
						</div>
					) : (
						<ElFormItem label={props.item.title}>
							{props.item.type == SchemaNodeType.string ? (
								<ElInput v-model={props.param[props.paramKey!]} placeholder={props.item.description} />
							) : (
								""
							)}
							{[SchemaNodeType.integer, SchemaNodeType.number, SchemaNodeType.float].includes(props.item.type as string) ? (
								<ElInput v-model={props.param[props.paramKey!]} placeholder={props.item.description} type="number" />
							) : (
								""
							)}
						</ElFormItem>
					)}
				</>
			);
		};
	}
});
